<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://localhost:8080/muapet/">
<meta charset="UTF-8">
<title>Mua~亲亲宠————新用户注册</title>

<link rel="stylesheet" href="css/style.css" />

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrapValidator.css" />
<link rel="stylesheet" href="css/fileinput.min.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/fileinput.min.js"></script>
<script type="text/javascript" src="js/fileinput_locale_zh.js"></script>


</head>
<body>
	<div class="title"></div>
	<div class="container">

		<div class="panel panel-info">
			<div class="panel-heading">
				<h3 class="panel-title">注册</h3>
			</div>
			<div class="panel-body">
				<div class="col-sm-offset-3  col-md-9 column">
					<form id="registerForm" class="form-horizontal" method="post"
						action="user/add.do">

						<div class="form-group">
							<label class="col-sm-2 control-label">登录名</label>
							<div class="col-sm-5">
								<input type="text" name="loginname" class="form-control" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">密码</label>
							<div class="col-sm-5">
								<input type="password" name="password" class="form-control" />

							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">确认密码</label>
							<div class="col-sm-5">
								<input type="password" name="repassword" class="form-control" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">昵称</label>
							<div class="col-sm-5">
								<input type="text" name="name" class="form-control" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">性别</label>
							<div class="col-sm-9">
								<label class="radio-inline"> <input type="radio"
									name="sex" value="0" checked> 保密 </label> <label
									class="radio-inline"> <input type="radio" name="sex"
									value="1"> 男</label> <label class="radio-inline"> <input
									type="radio" name="sex" value="2"> 女 </label>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">头像：</label>
							<div class="col-sm-5">
								<input type="hidden" id="icon" name="icon"> <input
									id="userIconFile" name="userIcon" type="file"
									style="height: 160px" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-5">
								<input type="text" name="email" class="form-control" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">手机号</label>
							<div class="col-sm-5">
								<input type="text" name="tel" class="form-control" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">真实姓名</label>
							<div class="col-sm-5">
								<input type="text" name="cardName" class="form-control" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">身份证号码</label>
							<div class="col-sm-5">
								<input type="text" name="cardId" class="form-control" />

							</div>
						</div>
						<div class="col-sm-offset-2 col-sm-3">
							<button type="submit" class="btn btn-info">确认信息</button>
						</div>
					</form>

				</div>
			</div>
		</div>
	</div>

	<script>
		$(document)
				.ready(
						function() {
							initFileInput("userIconFile",
									"http://localhost:8080/muapet/user/saveIcon.do");
							$('#registerForm')
									.bootstrapValidator(
											{
												message : 'This value is not valid',
												feedbackIcons : {
													valid : 'glyphicon glyphicon-ok',
													invalid : 'glyphicon glyphicon-remove',
													validating : 'glyphicon glyphicon-refresh'
												},
												fields : {
													loginname : {
														message : '',
														validators : {
															notEmpty : {
																message : '登录名不能为空'
															},
															stringLength : {
																min : 6,
																max : 20,
																message : '登录名最少6位，最多20位'
															},
															regexp : {
																regexp : /^[a-zA-Z][a-zA-Z0-9_]+$/,
																message : '用户名只能由字母，数字，下划线组成，并且只能由字母开头'
															},
															remote : {
																url : 'user/checkSameLoginname.do',
																message : "该用户名已经存在！",
																delay : 500
															},
														}
													},
													password : {
														message : '',
														validators : {
															notEmpty : {
																message : '密码不能为空'
															},
															stringLength : {
																min : 8,
																max : 30,
																message : '密码最少8位，最多30位'
															},
															regexp : {
																regexp : /^[a-zA-Z0-9_]+$/,
																message : '密码只能由字母，数字，下划线组成'
															}

														}
													},
													repassword : {
														message : '',
														validators : {
															notEmpty : {
																message : '确认密码不能为空'
															},
															stringLength : {
																min : 8,
																max : 30,
																message : '密码最少8位，最多30位'
															},
															identical : {
																field : 'password',
																message : '两次密码不同请重新输入'
															}
														}
													},
													name : {
														message : '',
														validators : {
															notEmpty : {
																message : '昵称不能为空'
															},
															stringLength : {
																min : 1,
																max : 12,
																message : '昵称最多12位'
															},
															regexp : {
																regexp : /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
																message : '用户名只能由中文，字母，数字，下划线组成'
															}
														}
													},
													email : {
														message : '',
														validators : {
															emailAddress : {
																message : '邮箱地址格式有误'
															}
														}
													},
													tel : {
														message : '',
														validators : {
															regexp : {
																regexp : /^(0|86|17951)?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/,
																message : '请输入国内11位手机号'
															}
														}
													},
													cardName : {
														message : '',
														validators : {
															regexp : {
																regexp : /^[\u4E00-\u9FA5A-Za-z]+$/,
																message : '请输入正确的姓名'
															}
														}
													},
													cardId : {
														message : '',
														validators : {
															regexp : {
																regexp : /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
																message : '请输入正确的18位身份证号'
															}
														}
													}
												}
											});
						});
		function initFileInput(ctrlName, uploadUrl) {
			var icon = 'images/user_icon.jpg';
			var control = $('#' + ctrlName);
			control
					.fileinput({
						language : 'zh', //设置语言
						uploadUrl : uploadUrl, //上传的地址
						autoReplace : true,
						uploadAsync : true,
						allowedFileExtensions : [ 'jpg', 'png' ],//接收的文件后缀
						maxFileCount : 1, //表示允许同时上传的最大文件个数 
						showUpload : false, //是否显示上传按钮
						showRemove : false,
						showCaption : false,//是否显示标题
						showClose : false,
						dropZoneEnabled : false,
						showUploadedThumbs : false,

						initialPreviewShowDelete : false,
						browseClass : "btn btn-primary", //按钮样式             
						previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
						initialPreview : [ "<img src="+icon+" class='file-preview-image'>" ],
						layoutTemplates : {
							actionUpload : '',
							actionDelete : ''
						}
					});

			//选择文件后处理事件
			control.on("filebatchselected", function(event, files) {
				var filesCount = control.fileinput('getFilesCount');
				if (filesCount > 0) {
				}
				control.fileinput("upload");

			}).on("fileerror", function(event, data) {
			}).on("fileuploaded", function(event, data) {
				if (data.response) {
					$("#icon").val(data.response);
				}

			});
		}
	</script>


</body>
</html>